<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <title>NCUT 猫</title>
    <!-- jquery -->
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/jquery.form.js"></script>
    <!-- popper -->
    <script src="./lib/popper.min.js"></script>
    <!-- marked -->
    <script src="./lib/marked.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
    <link rel="stylesheet" href="./lib/bootstrap-theme.min.css">
    <script src="./lib/bootstrap.min.js"></script>
    <script src="./lib/bootstrap.bundle.min.js"></script>
    <!-- vue -->
    <script src="./lib/vue.js"></script>
    <!-- js -->
    <script src="./js/ConstData.js"></script>
    <script src="./js/navManager.js"></script>
    <script src="./js/foot-tab-bar.js"></script>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="./css/mainFrame.css">
    <link rel="stylesheet" type="text/css" href="./css/tab-bar.css">
    <link rel="stylesheet" type="text/css" href="./css/markdown.css">
    <!-- icon -->
    <script src="./icon/iconfont.js"></script>
    <style type="text/css">
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    </style>
</head>

<body>
    <span id="head_top" class="head_top">
        <span class="top_icon"></span>
        <span class="top_text">北方工大猫协</span>
        <span id="top_nav_box" class="top_nav_box">
            <span id="top_nav" class="top_nav">
                <!-- JS ADD -->
            </span>
        </span>
    </span>
    <span class="head">
        <span class="top_box">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-news"></use>
            </svg>
            <span class="text">关注公众号, 动态活动不迷路</span>
            <span class="action">关注</span>
        </span>
        <ul id="head_nav" class="nav nav-tabs">
            <!-- 使用JS添加 -->
        </ul>
        <div id="head_carousel" class="carousel slide" data-bs-ride="carousel">
            <!-- 指示符 -->
            <ul class="carousel-indicators">
                <li data-bs-target="#head_carousel" data-bs-slide-to="0" class="active"></li>
                <li data-bs-target="#head_carousel" data-bs-slide-to="1"></li>
                <li data-bs-target="#head_carousel" data-bs-slide-to="2"></li>
            </ul>
            <!-- 轮播图片 -->
            <div class="carousel-inner">
                <div class="carousel-item active"> <img src=""> </div>
                <div class="carousel-item"> <img src=""> </div>
                <div class="carousel-item"> <img src=""> </div>
            </div>
            <script>
            $.get("/img/cat-rand?limit=3", r => {
                if (!r.success) return;
                for (let i = 0; i < 3 && i < r.result.length; i++) {
                    let hash = r.result[i].hash;
                    $(`#head_carousel .carousel-inner img:eq(${i})`).attr('src', '/img/cat/' + hash);
                }
            });
            </script>
        </div>
        </sspan>
        <div id="main-content">
            <script id="js_head_nav_adder" type="text/javascript">
            (() => {
                let arr =eval('[[["喂食","feed"],[["禁喂","ban"],["适合","fit"],["推荐","recommend"]]],[["撸猫","stroke"],[["撸猫动作","you"],["猫咪动作","cat"],["注意事项","note"]]],[["疾病","ill"],[["疾病介绍","info"],["宠物医院","hospital"],["紧急救助","sos"]]],[["绝育","spay"],[["原理介绍","principle"],["基础操作","operation"],["注意事项","note"]]],[["领养","adopt"],[["要求","requirement"],["流程","process"],["公告","notice"]]]]');
                for (let index_x in arr) {
                    let x = arr[index_x];

                    //头部导航
                    $("#head_nav").append(`<li><a href="javascript:void(0);" onclick="nav_click(true)">&nbsp;&nbsp;${x[0][0]}&nbsp;&nbsp;</a></li>`);

                    //主题内容
                    let main_id = x[0][1];
                    let sub_nav_element = '';
                    let sub_content_element = '';
                    x[1].forEach(y => {
                        //子导航
                        sub_nav_element += `<span id="nav_${main_id}-${y[1]}" class="${sub_nav_element?'':'active'}">${y[0]}</span>`;
                        //文章
                        sub_content_element += `<span id="content_${main_id}-${y[1]}"class="markdown" style="${sub_content_element?'display: none;':''}"></span>`
                        //文章获取 主标题-小标题.md
                        $(() => $.get(`/public/data/knowledge/${x[0][0]}-${y[0]}.md`, r => $(`#content_${main_id}-${y[1]}`).html(r ? marked(r) : '')));
                    });
                    let frame = `<span class="main-content" style="${index_x>0?'display: none;':''}"><span id="main-nav-${main_id}" class="sub_nav">${sub_nav_element}</span><span id="main-content-${main_id}">${sub_content_element}</span></span>`;
                    $("#main-content").append(frame);
                }
                $($("#head_nav").children('li')[0]).addClass("active");
            })();
            </script>
        </div>
</body>

</html>